<template>
  <el-scrollbar height = "80vh">
    <div style = "padding-top: 10px;">
      <el-tabs v-model = "activeName" class = "demo-tabs">
        <!--我收藏的音乐-->
        <el-tab-pane label = "专辑" name = "album">
          <div>
            <h3 style = "margin: 10px 30px">我收藏的音乐</h3>
            <ul>
              <CollectedItem :is-album = "true" :data-list = "[1,2,3]" />
            </ul>
          </div>
        </el-tab-pane>
        <!--我收藏的歌手-->
        <el-tab-pane label = "歌手" name = "singer">
          <div>
            <h3 style = "margin: 10px 30px">我收藏的歌手</h3>
            <ul>
              <CollectedItem :is-album = "false" :data-list = "[1,2,3]" />
            </ul>
          </div>

        </el-tab-pane>
        <!--视频-->
        <el-tab-pane label = "视频" name = "video">

        </el-tab-pane>
      </el-tabs>
    </div>
  </el-scrollbar>

</template>

<script setup>

import {ref} from "vue";
import CollectedItem from "@/views/MyCollections/CollectedItem";

let activeName = ref('album')
</script>

<style lang = "less" scoped>
:deep(.el-tabs) {


  .el-tabs__content {
    height: 100%;
  }

  .el-tabs__nav-scroll {
    padding: 0 30px;
  }

  .el-tabs__nav-wrap::after {
    height: 0;
  }

  .el-tabs__item.is-active {
    color: black;
    font-size: 15px;
    font-weight: bolder;
  }

  .el-tabs__item:hover {
    color: black;
    font-weight: bold;
  }

  .el-tabs__active-bar {
    background-color: var(--slider-button-color);
  }
}

</style>